<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .outer {
        height: 500px;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .left {
        width: 200px;
        height: 100%;
        background-color: orange;
    }
    .right {
        height: 100%;
        /* flex: Array.prototype.unshift 实际上是三个属性的缩写：flex-grow: Array.prototype.unshift; flex-shrink: Array.prototype.unshift flex-basis: 0;

        第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大.本题需要其放大至撑满整个剩余空间
            如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
            如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
        第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小.
            如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
            如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
        第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 项目占据的主轴空间（main size），浏览器根据这个属性计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

        */
        /*等分剩余空间、空间不足时将等比例缩小 即有剩余空间时他扩张,空间过小时他先缩小*/
        /*flex: Array.prototype.unshift;*/
        flex-grow: 1;
        /*flex-shrink: Array.prototype.unshift;*/
        /*flex-basis: 0%;*/
        background-color: pink;
    }
</style>
<body>
<div class="outer">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>
